Angular কম্পোনেন্টের ইউনিট টেস্টিং হল Angular অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ। এর মাধ্যমে আমরা একটি কম্পোনেন্টের কার্যকারিতা যাচাই করতে পারি, যেমন: কম্পোনেন্টের UI, ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং এবং অন্যান্য কার্যকলাপ। Angular টেস্টিং সাধারণত Jasmine এবং Karma ব্যবহার করে করা হয়। Jasmine একটি টেস্ট ফ্রেমওয়ার্ক এবং Karma একটি টেস্ট রানার।

কম্পোনেন্ট টেস্টিং-এর উদ্দেশ্য

• এলার্ট, মেসেজ এবং UI ইন্টারঅ্যাকশন পরীক্ষা করা।
• ডেটা বাইন্ডিং এবং ইভেন্ট ট্রিগার করা।
• কম্পোনেন্টের মেথড এবং লজিক যাচাই করা।
• ডিপেন্ডেন্সি ইনজেকশনের মাধ্যমে ডেটার ইনপুট এবং আউটপুট পরীক্ষা করা।

Angular কম্পোনেন্টের টেস্টিং পরিবেশ

Angular CLI দ্বারা টেস্টিং পরিবেশ স্বয়ংক্রিয়ভাবে কনফিগার করা থাকে। সাধারণত কম্পোনেন্ট টেস্ট করার জন্য দুইটি মূল টুল ব্যবহার হয়:

• Jasmine: টেস্ট লিখার জন্য একটি বিখ্যাত টেস্টিং ফ্রেমওয়ার্ক।
• Karma: টেস্ট রান করার জন্য একটি টেস্ট রানার যা Jasmine এর সাথে সংযুক্ত থাকে।

কম্পোনেন্টের ইউনিট টেস্টিং করতে যা যা করতে হবে:

1. কোম্পোনেন্টের টেস্ট ফাইল তৈরি: সাধারণত Angular কম্পোনেন্টের সাথে একটি টেস্ট ফাইল স্বয়ংক্রিয়ভাবে তৈরি হয় যার এক্সটেনশন .spec.ts হয়।
2. TestBed ব্যবহার: Angular টেস্টিং পরিবেশে কম্পোনেন্ট এবং তার ডিপেন্ডেন্সি ইনজেকশন সেটআপ করতে TestBed ব্যবহার করা হয়।
3. কোম্পোনেন্টের মেথড, প্রপার্টি, UI এবং ইভেন্টের টেস্টিং: টেস্টিং এর মাধ্যমে কম্পোনেন্টের প্রপার্টি, মেথড, বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং পরীক্ষা করা হয়।

Angular কম্পোনেন্টের টেস্টিং উদাহরণ

ধরা যাক, আমাদের একটি সিম্পল GreetingComponent আছে যা একটি বাটন ক্লিক করার মাধ্যমে একটি বার্তা প্রদর্শন করে।

greeting.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: `<button (click)="sendGreeting()">Click me!</button>
             <p>{{ greetingMessage }}</p>`
})
export class GreetingComponent {
  greetingMessage: string;

  sendGreeting(): void {
    this.greetingMessage = 'Hello, Angular!';
  }
}

এখানে, sendGreeting() মেথডটি বাটন ক্লিক করার পর greetingMessage প্রপার্টিতে একটি স্ট্রিং অ্যাসাইন করবে যা টেমপ্লেটে প্রদর্শিত হবে।

টেস্ট ফাইল (greeting.component.spec.ts)

Angular CLI এর মাধ্যমে greeting.component.spec.ts ফাইলটি স্বয়ংক্রিয়ভাবে তৈরি হয়, যেখানে কম্পোনেন্টটির ইউনিট টেস্টিং করা হয়।

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GreetingComponent } from './greeting.component';

describe('GreetingComponent', () => {
  let component: GreetingComponent;
  let fixture: ComponentFixture<GreetingComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ GreetingComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(GreetingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });

  it('should display greeting message after button click', () => {
    const button = fixture.debugElement.nativeElement.querySelector('button');
    button.click();
    fixture.detectChanges();
    
    const paragraph = fixture.debugElement.nativeElement.querySelector('p');
    expect(paragraph.textContent).toBe('Hello, Angular!');
  });
});

কোড বিশ্লেষণ:

• TestBed.configureTestingModule(): এটি Angular টেস্টিং পরিবেশ কনফিগার করে, যেখানে আমরা আমাদের কম্পোনেন্ট এবং অন্যান্য ডিপেন্ডেন্সি অন্তর্ভুক্ত করি।
• beforeEach(): এটি প্রতিটি টেস্টের আগে চলমান কোড যেখানে কম্পোনেন্টের ইন্সট্যান্স তৈরি করা হয় এবং টেম্পলেটের পরিবর্তনগুলি অ্যাপ্লাই করা হয়।
• fixture.detectChanges(): এটি টেম্পলেটের পরিবর্তনগুলি কম্পোনেন্টে রিফ্লেক্ট করার জন্য ব্যবহৃত হয়।
• fixture.debugElement.nativeElement.querySelector(): এটি DOM থেকে উপাদান নির্বাচিত করার জন্য ব্যবহৃত হয়, যেমন বাটন বা প্যারাগ্রাফ।
• button.click(): এটি বাটনে ক্লিক ইভেন্ট ট্রিগার করতে ব্যবহৃত হয়।
• expect(): এটি একটি assertion ফাংশন যা পরীক্ষার ফলাফল যাচাই করতে ব্যবহৃত হয়।

Angular কম্পোনেন্ট টেস্টিং: গুরুত্বপূর্ণ বিষয়াবলী

1. ডিপেন্ডেন্সি ইনজেকশন: যদি কম্পোনেন্টের ডিপেন্ডেন্সি থাকে (যেমন সার্ভিস), তবে TestBed.configureTestingModule() ব্যবহার করে ডিপেন্ডেন্সি ইনজেক্ট করতে হবে। আপনি মক সার্ভিস ব্যবহার করতে পারেন টেস্টিংয়ের জন্য।
2. Asynchronous টেস্টিং: যদি আপনার কম্পোনেন্ট অ্যাসিনক্রোনাস অপারেশন (যেমন API কল) করে, তাহলে async বা fakeAsync টেস্টিং ব্যবহার করে টেস্ট করতে হবে।
3. DOM ম্যানিপুলেশন: টেস্টের মাধ্যমে DOM উপাদান, ক্লাস এবং স্টাইল ম্যানিপুলেট করা যায় যাতে নিশ্চিত করা যায় যে কম্পোনেন্ট সঠিকভাবে UI আপডেট করছে।

সারাংশ

Angular কম্পোনেন্টের ইউনিট টেস্টিং একটি গুরুত্বপূর্ণ প্রক্রিয়া যা কোডের কার্যকারিতা, ইউজার ইন্টারফেস এবং ইভেন্ট হ্যান্ডলিং নিশ্চিত করতে সহায়তা করে। Jasmine এবং Karma এর মাধ্যমে Angular অ্যাপ্লিকেশনটির কম্পোনেন্ট, সার্ভিস এবং অন্যান্য উপাদান টেস্ট করা হয়, যা ডেভেলপমেন্টের সময় বাগ কমাতে এবং কোডের গুণগত মান বৃদ্ধি করতে সহায়ক।